<template>
    <div class="pie-box">
      <div ref="pieBar" class="echarts" style="height: 100%"></div>
      <div class="pie-legend">
        <div v-for="(item, index) in data" :key="item.name" class="pie-info">
          <div
            class="legend-color"
            :style="{ background: colorList[index][0].color }"
          ></div>
          <label>{{ item.name }}：</label>
          <span :style="{ color: colorList[index][0].color }">{{
            item.value
          }}</span>
        </div>
      </div>
    </div>
  </template>
  <script>
  export default {
    name: "PieiBar",
    components: {},
    props: {
      oneUnit: {
        type: String,
        default: ""
      },
      rotate: {
        type: Number,
        default: 0
      },
      barWidth: {
        type: Number,
        default: 15
      },
      unitArr: {
        type: Array,
        default: () => {
          return [];
        }
      },
      xAxisData: {
        type: Array,
        default: () => {
          return [];
        }
      },
      data: {
        type: Array,
        default: () => {
          return [
            {
              value: 60,
              name: "航标总数",
              itemStyle: {
                color: "rgba(39,61,78,1)"
              }
            },
            {
              value: 10,
              name: "终端数量",
              itemStyle: {
                color: "rgba(39,61,78,1)"
              }
            },
            {
              value: 15,
              name: "失常报警数量",
              itemStyle: {
                color: "rgba(39,61,78,1)"
              }
            }
          ];
        }
      },
      title: {
        type: String,
        default: ""
      },
      subtext: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        legendData: [],
        seriesData: [],
        colorList: [
          [
            { offset: 0, color: "#6E6BFC" },
            { offset: 1, color: "#96A0FF" }
          ],
          [
            { offset: 0, color: "#407FFF" },
            { offset: 1, color: "#70ADFF" }
          ],
          [
            { offset: 0, color: "#F69D33" },
            { offset: 1, color: "#F9BD75" }
          ],
          [
            { offset: 0, color: "#3BEB75" },
            { offset: 1, color: "#C4FCD6" }
          ],
          [
            { offset: 0, color: "#40D8F9" },
            { offset: 1, color: "#A0FCFF" }
          ],
          [
            { offset: 0, color: "#2097FC" },
            { offset: 1, color: "#4EBAFF" }
          ]
        ]
      };
    },
    computed: {},
    watch: {
      data: {
        handler: function (val, oldVal) {
          this.legendData = [];
          this.seriesData = [];
          // if (val.length > 0) {
          // val.forEach((ele, index) => {
          //   this.legendData.push(ele.name);
          //   let obj = {
          //     value: ele.value,
          //     name: ele.name,
          //     itemStyle: {
          //       normal: {
          //         //颜色渐变
          //         color: new echarts.graphic.LinearGradient(
          //           0,
          //           0,
          //           0,
          //           1,
          //           this.colorList[index]
          //         ),
          //       },
          //     },
          //     label: {
          //       color: "#fff",
          //       formatter: (params) =>
          //         `${
          //           params.value >= 1
          //             ? "{b|" + params.value + "}"
          //             : params.value
          //         }\n${params.name}`, // label不支持html片段
          //       edgeDistance: 1,
          //       lineHeight: 22,
          //       rich: {
          //         b: {
          //           fontSize: 22,
          //           color: this.colorList[index][0].color,
          //         },
          //         cstyle: {
          //           fontSize: 16,
          //           color: "#fff",
          //         },
          //       },
          //     },
          //   };
          //   this.seriesData.push(obj);
          // });
          setTimeout(() => {
            this.init();
          }, 200);
          // }
        },
        // 深度观察监听
        deep: true,
        immediate: true
      }
    },
    created() {},
    mounted() {},
    destroyed() {},
    methods: {
      init() {
        const that = this;
        const myEcharts = echarts.init(this.$refs["pieBar"]);
        const option = {
          title: {
            text: this.title,
            subtext: this.subtext,
            x: "center",
            y: "27%",
            textStyle: {
              color: "#ddd",
              fontSize: 20,
              fontWeight: "normal",
              align: "center",
              width: "200px"
            },
            subtextStyle: {
              color: "#ddd",
              fontSize: 14,
              fontWeight: "normal",
              align: "center"
            }
          },
          graphic: [
            // {
            //   type: "text",
            //   left: "center",
            //   top: "40%",
            //   z: 10,
            //   style: {
            //     fill: "#fff",
            //     fontSize: 30,
            //     text: "760.56"
            //   }
            // },
            {
              type: "text",
              left: "23%",
              top: "46%",
              z: 10,
              style: {
                fill: "#fff",
                text: "航标统计",
                fontSize: 18,
                font: "30px Microsoft YaHei"
              }
            }
            // {
            //   type: "text",
            //   left: "center",
            //   top: "58%",
            //   z: 10,
            //   style: {
            //     fill: "#fff",
            //     text: "总投资",
            //     fontSize: 22,
            //     font: "30px Microsoft YaHei"
            //   }
            // }
          ],
          tooltip: {
            confine: true,
            trigger: "item",
            axisPointer: {
              type: "shadow",
              textStyle: {
                color: "#fff"
              }
            },
            formatter: function (value) {
              return value.marker + value.data.name + "：" + value.data.value;
            }
          },
          series: [
            {
              color: ["rgba(39,61,78,1)"],
              type: "pie",
              radius: "36%",
              center: ["30%", "50%"],
              data: [{ value: 100, name: "" }],
              silent: true,
              emphasis: {
                scale: false
              },
              label: {
                show: false
              }
            },
            {
              name: "1层",
              type: "pie",
              radius: ["41%", "55%"],
              center: ["30%", "50%"],
              label: {
                show: false
              },
              silent: true,
              animation: false,
              selectedOffset: 0,
              tooltip: {
                show: false
              },
              itemStyle: {
                borderWidth: 10,
                borderColor: "rgba(17, 50, 69, 1)"
              },
              data: that.data.map(o => {
                o["itemStyle"] = {
                  color: "rgba(39,61,78,1)"
                };
                return o;
              })
            },
            {
              name: "2层",
              type: "pie",
              radius: ["55%", "80%"],
              center: ["30%", "50%"],
              labelLine: {
                show: false,
                lineStyle: {
                  width: 3
                },
                normal: {
                  length: 20, // 指示线长度
                  length2: 60
                }
              },
              label: {
                // position: 'inner',
                color: "#FFF",
                formatter: "{b}",
                fontSize: "20",
                show: false
              },
              color: ["#FFDC44", "#5AFFDF", "#5AFFDF"],
              itemStyle: {
                borderWidth: 10,
                borderColor: "rgba(17, 50, 69, 1)"
              },
              data: that.data.map((o, index) => {
                o.itemStyle = {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    this.colorList[index]
                  ) //"rgba(39,61,78,1)"
                };
                return o;
              })
            }
          ]
        };
  
        myEcharts.setOption(option);
        myEcharts.resize();
      }
    }
  };
  </script>
  <style lang="less" scoped>
  .pie-box {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    // background: #113245;
    // background: url(../../assets/images/er/piebg.png);
    // background-size: 80% 80%;
  }
  .echarts {
    width: 100%;
  }
  .pie-legend {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%);
    color: #fff;
    .pie-info {
      width: 100%;
      padding: 10px;
      text-align: left;
    }
    .legend-color {
      width: 12px;
      height: 12px;
      display: inline-block;
      background: #fff;
      vertical-align: middle;
      margin-right: 5px;
    }
    label,
    span {
      padding-right: 5px;
      display: inline-block;
      vertical-align: middle;
      font-size: 16px;
    }
    span {
      font-size: 24px;
      font-family: "YouSheBiaoTiHei";
    }
  }
  </style>
  